<script props>
  module.exports = {
    align: {
      left: 'text-left',
      center: 'text-center',
      right: 'text-right',
    }[props.align],
    href: props.href,
    msoPt: props['mso-pt'] || '16px',
    msoPr: props['mso-pr'] || '32px',
    msoPb: props['mso-pb'] || '30px',
    msoPl: props['mso-pl'] || '32px',
  }
</script>

<div class="{{ align }}">
  <a
    attributes
    href="{{ href }}"
    class="inline-block py-4 px-6 text-base leading-none font-semibold rounded text-slate-50 bg-indigo-700 [text-decoration:none]"
  >
    <outlook>
      <i
        class="mso-font-width-[-100%]"
        style="letter-spacing: {{ msoPl }}; mso-text-raise: {{ msoPb }};"
        hidden
      >&nbsp;</i>
    </outlook>
    <span style="mso-text-raise: {{ msoPt }}"><content /></span>
    <outlook>
      <i
        class="mso-font-width-[-100%]"
        style="letter-spacing: {{ msoPr }};"
        hidden
      >&nbsp;</i>
    </outlook>
  </a>
</div>
